Conversation
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
정말 고생 많으셨습니다! 👏🏻👏🏻👏🏻
이번 주 워크북을 통해 Redux Toolkit과 Zustand 두 가지 상태관리 라이브러리를 모두 다뤄보았습니다. 앞으로 프로젝트 복잡도나 규모에 따라 적절한 상태관리 도구를 선택할 수 있는 안목을 갖추게 되셨으면 좋겠습니다! 👍🏻👍🏻👍🏻
| import { configureStore } from '@reduxjs/toolkit'; | ||
| import cartReducer from './cartslice'; | ||
| import modalReducer from './modalslice'; | ||
|
|
||
| const store = configureStore({ | ||
| reducer: { | ||
| cart: cartReducer, | ||
| modal: modalReducer, | ||
| }, | ||
| }); | ||
|
|
||
| export type RootState = ReturnType<typeof store.getState>; | ||
| export type AppDispatch = typeof store.dispatch; | ||
| export default store; No newline at end of file |
There was a problem hiding this comment.
현재 장바구니 데이터가 새로고침 시 초기화되고 있는데, Redux Toolkit의 redux-persist나 Zustand의 persist 미들웨어를 적용하여, 새로고침 후에도 장바구니 상태가 유지되도록 🚀Challenge 미션에 도전해 보시면 좋겠습니다!
| ReactDOM.createRoot(document.getElementById('root')!).render( | ||
| <React.StrictMode> | ||
| <Provider store={store}> | ||
| <App /> | ||
| </Provider> | ||
| </React.StrictMode> | ||
| ); No newline at end of file |
There was a problem hiding this comment.
현재 미션 3의 App.tsx 에서 Redux의 Provider로 감싸고 있는데, 미션 3에서는 Zustand로 상태 관리를 전환했기 때문에 이 부분은 제거해야 합니다. 또한, store.ts, cartSlice.ts, modalslice.ts 등 Redux 관련 파일들이 여전히 남아있는데, 프로젝트 구조를 명확하게 하기 위해 해당 파일들도 제거하는 것을 권장합니다!
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { closeModal } from '../store/modalslice'; | ||
| import { clearCart } from '../store/cartslice'; | ||
| import type { RootState } from '../store/store'; | ||
|
|
||
| const ConfirmModal = () => { | ||
| const dispatch = useDispatch(); | ||
| const { isOpen, type } = useSelector((state: RootState) => state.modal); | ||
|
|
||
| if (!isOpen || type !== 'clearCart') return null; |
There was a problem hiding this comment.
현재 미션 3에서 장바구니는 Zustand로 관리하고 있지만, 모달은 아직 Redux로 관리하고 있어 혼재된 상태입니다. modalStore.ts (openModal/closeModal 액션 포함)를 생성하고, 모든 컴포넌트에서 Redux 훅을 Zustand 훅으로 교체해보세요!
Merge branch 'main' of https://github.com/hsu-makeus-challenge/Web into wendy
2 participants
📝 미션 번호
9주차 Misson 1,2,3
📋 구현 사항
📎 스크린샷
✅ 체크리스트
🤔 질문 사항